<div id="modal-security" class="modal show">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-danger"><i class="fas fa-exclamation-triangle"></i> {{ heading_title }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">

        <div class="alert alert-info"><i class="fas fa-exclamation-circle"></i> {{ text_security }}</div>

        <div id="security-start">

          <p>Some security is have been detected. Click continue to start fixing the issues.</p>

          <button type="button" class="btn btn-primary">Continue</button>
       </div>

        {% if error_install %}
          <div id="security-install" class="d-none">
            <h4 class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ text_install }}</h4>

            <form id="form-install" action="{{ save }}" method="post" data-oc-toggle="ajax">
              <fieldset>
                <legend>{{ text_choose }}</legend>
                <div class="mb-3">
                  The install below directory needs deleting. %s
                  <button type="button" id="button-delete" class="btn badge-warning"><i class="fas fa-trash-alt"></i> Delete</button>
                </div>
              </fieldset>
            </form>

          </div>
        {% endif %}


        {% if error_storage %}
          <div id="security-install" class="d-none">
            <h4 class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ text_storage }}</h4>

            <form id="form-storage" action="{{ save }}" method="post" data-oc-toggle="ajax">
              <fieldset>
                <legend>{{ text_storage_choose }}</legend>
                <div class="mb-3">
                  <select name="type" id="input-type" class="form-select">
                    <option value="automatic">{{ text_storage_automatic }}</option>
                    <option value="manual">{{ text_storage_manual }}</option>
                  </select>
                </div>
              </fieldset>
              <fieldset id="collapse-automatic" class="collapse">
                <legend>{{ text_storage_automatic }}</legend>
                <div class="mb-3">
                  <div class="input-group dropdown">
                    <button type="button" id="button-path" data-bs-toggle="dropdown" class="btn btn-primary dropdown-toggle">{{ document_root }} <span class="fas fa-caret-down"></span></button>
                    <div class="dropdown-menu">
                      {% for path in paths %}
                        {% if path|length > document_root|length %}
                          <a href="{{ path }}" class="dropdown-item"><i class="fas fa-exclamation-triangle fa-fw text-danger"></i> {{ path }}</a>
                        {% else %}
                          <a href="{{ path }}" class="dropdown-item"><i class="fas fa-check-circle fa-fw text-success"></i> {{ path }}</a>
                        {% endif %}
                      {% endfor %}
                    </div>
                    <input type="text" name="directory" value="storage" placeholder="{{ entry_directory }}" class="form-control"/>
                    <button type="button" id="button-move" data-oc-loading-text="{{ text_loading }}" class="btn btn-danger"><i class="fas fa-exclamation-triangle"></i> {{ button_move }}</button>
                  </div>
                  <input type="hidden" name="path" value="{{ document_root }}"/>
                </div>
              </fieldset>
              <fieldset id="collapse-manual" class="collapse">
                <legend>{{ text_storage_manual }}</legend>
                <div class="card-body" style="height: 300px; overflow-y: scroll;"></div>
              </fieldset>
            </form>
          </div>
        {% endif %}

        {% if error_admin %}
          <div id="security-admin" class="d-none">

            <div class="bg-light p-3 mb-2 rounded-3 border border-danger">
              <h4 class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ text_admin }}</h4>
            </div>

            <form id="form-admin" action="{{ save }}" method="post" data-oc-toggle="ajax">
              <fieldset>
                <legend>{{ text_admin_choose }}</legend>
                <div class="mb-3">
                  <div class="input-group">
                    <input type="text" name="directory" value="admin" id="input-directory" class="form-control"/>
                    <button type="button" id="button-move" data-oc-loading-text="{{ text_loading }}" class="btn btn-danger"><i class="fas fa-exclamation-triangle"></i> {{ button_rename }}</button>
                  </div>
                </div>
              </fieldset>
            </form>

          </div>

        {% endif %}
      </div>


    </div>
  </div>
</div>
<script type="text/javascript"><!--
$('#modal-security').modal('show');


$('#modal-security select[name=\'type\']').on('change', function() {
    $('#modal-security fieldset.collapse').removeClass('show');

    $('#modal-security #collapse-' + $(this).val()).addClass('show');
});

$('#modal-security select[name=\'type\']').trigger('change');

$('#modal-security .dropdown-menu a').on('click', function(e) {
    e.preventDefault();

    $('#modal-security #button-path').html($(this).html() + ' <span class="fas fa-caret-down"></span>');

    $('#modal-security input[name=\'path\']').val($(this).attr('href'));
});

$('#modal-security .dropdown-menu a').on('click', function(e) {
    e.preventDefault();

    $('#button-path').html($(this).text() + ' <span class="fas fa-caret-down"></span>');

    $('input[name=\'path\']').val($(this).attr('href'));

    $('input[name=\'path\']').trigger('change');
});



$('#button-move').on('click', function() {
    var element = this;

    $.ajax({
        url: 'index.php?route=common/security|move&user_token={{ user_token }}',
        type: 'post',
        data: $('input[name=\'path\'], input[name=\'directory\']'),
        dataType: 'json',
        crossDomain: true,
        beforeSend: function() {
            $(element).button('loading');
        },
        complete: function() {
            $(element).button('reset');
        },
        success: function(json) {
            $('.alert-dismissible').remove();

            if (json['error']) {
                $('#modal-security .modal-body').prepend('<div class="alert alert-danger alert-dismissible"><i class="fas fa-exclamation-circle"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }

            if (json['success']) {
                $('#modal-security .modal-body').prepend('<div class="alert alert-success alert-dismissible"><i class="fas fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }
        },
        error: function(xhr, ajaxOptions, thrownError) {
            oc.alert('danger', thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

$('#modal-security select[name=\'type\']').on('change', function() {
    html = '<ol>';
    html += '  <li><p>{{ text_move }}</p>';
    html += '    <p><strong>{{ storage }}</strong></p>';
    html += '    <p>{{ text_to }}</p>';
    html += '    <p><strong>' + $('#modal-security input[name=\'path\']').val() + $('#modal-security input[name=\'directory\']').val() + '/</strong></p></li>';
    html += '   <li><p>{{ text_config }}</p>';
    html += '     <p><strong>define(\'DIR_STORAGE\', DIR_SYSTEM . \'storage/\');</strong></p>';
    html += '     <p>{{ text_by }}</p>';
    html += '     <p><strong>define(\'DIR_STORAGE\', \'' + $('#modal-security input[name=\'path\']').val() + $('#modal-security input[name=\'directory\']').val() + '/\');</strong></p></li>';
    html += '   <li><p>{{ text_admin }}</p>';
    html += '     <p><strong>define(\'DIR_STORAGE\', DIR_SYSTEM . \'storage/\');</strong></p>';
    html += '     <p>{{ text_by }}</p>';
    html += '     <p><strong>define(\'DIR_STORAGE\', \'' + $('#modal-security input[name=\'path\']').val() + $('#modal-security input[name=\'directory\']').val() + '/\');</strong></p></li>';
    html += '</ol>';

    $('#collapse-manual .card-body').html(html);
});

$('input[name=\'path\']').trigger('change');
//--></script>
